<template>
  <div class="app-container">
    <div>
      <el-form :inline="true" size="small">
        <el-form-item label="运输公司名称">
          <el-input
            clearable
            style="width: 240px"
            v-model="params.companyName"
          />
        </el-form-item>
        <el-form-item label="状态">
          <el-select
            placeholder="用户状态"
            clearable
            style="width: 240px"
            v-model="params.status"
          >
            <el-option :label="'启用'" :value="0" />
            <el-option :label="'禁用'" :value="-1" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="select"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="selectRestart"
            >重置</el-button
          >
        </el-form-item>
      </el-form>

      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="open = true"
            >新增</el-button
          >
        </el-col>
      </el-row>

      <el-table v-loading="loading" :data="CompanyList">
        <!-- <el-table-column type="selection" width="50" align="center" /> -->
        <el-table-column type="index" label="序号" width="50" align="center" />
        <el-table-column
          label="公司编码"
          align="center"
          key="companyCode"
          width="150"
          :show-overflow-tooltip="true"
          prop="companyCode"
        />
        <el-table-column
          label="公司名称"
          key="companyName"
          prop="companyName"
          width="400"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="职称"
          key="companyAbbreviation"
          prop="companyAbbreviation"
          width="250"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="联系人"
          key="companySize"
          prop="contacts"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          label="联系电话"
          key="companyType"
          prop="mobile"
          width="180"
        >
        </el-table-column>
        <el-table-column
          label="事业单位"
          width="130"
          key="contacts"
          prop="contacts"
          :show-overflow-tooltip="true"
        />
        <el-table-column label="状态" align="center" key="status">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              active-value="0"
              disabled
              inactive-value="-1"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column
          label="车辆数量"
          key="vehicleCount"
          prop="vehicleCount"
          width="120"
        />
        <el-table-column
          label="更新时间"
          align="center"
          prop="updateTime"
          width="160"
        >
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.updateTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="创新时间"
          align="center"
          prop="createTime"
          width="160"
        >
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          fixed="right"
          align="center"
          width="160"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="handleUpdate(scope.row)"
              v-hasPermi="['biz:residentCompany:edit']"
              >修改</el-button
            >
            <el-button
              size="mini"
              type="text"
              @click="handleDetail(scope.row)"
              v-hasPermi="['biz:residentCompany:query']"
              >详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <pagination
        :total="total"
        :page="params.pageNum"
        :limit="params.pageSize"
        :page-sizes="[10, 15, 20, 25, 30]"
        @pagination="handleCurrentChange"
      />

      <addCompanyDialog
        :open="open"
        :title="'添加企业'"
        @cancel="cancelDialog"
        @submitSuccess="SubmitSuccess"
      />
    </div>
  </div>
</template>

<script>
import { getTransportCompanyListAPI } from "@/api/organization/transportCompany.js";
import addCompanyDialog from "./components/addCompanyDialog.vue";
export default {
  components: { addCompanyDialog },
  data() {
    return {
      CompanyList: [],
      loading: true,
      params: {
        pageNum: 1,
        pageSize: 10,
        companyName: "",
        status: 0,
      },
      total: 0,
      open: false,
    };
  },
  created() {
    this.getTransportCompanyList();
  },
  methods: {
    async getTransportCompanyList() {
      this.loading = true;
      const res = await getTransportCompanyListAPI(this.params);
      console.log(res);
      this.loading = false;
      this.CompanyList = res.rows;
      this.total = res.total;
    },
    handleCurrentChange(pageObj) {
      console.log(pageObj);
      this.params.pageNum = pageObj.page;
      this.params.pageSize = pageObj.limit;
      this.getTransportCompanyList();
    },
    select() {
      this.getTransportCompanyList();
    },
    selectRestart() {
      this.params = {
        pageNum: 1,
        pageSize: 10,
        companyName: "",
        status: 0,
      };
      this.getTransportCompanyList();
    },
    cancelDialog() {
      console.log("关闭弹窗");
      this.open = false;
    },
    SubmitSuccess() {
      this.getTransportCompanyList();
      this.open = false;
    },
  },
};
</script>
